<template>
  <div class="app-container home" style="padding: 0px">
    <div style="padding: 50px; text-align: center">
      <div
        style="
          border: #1ab394 1px solid;
          width: 340px;
          float: left;
          margin-left: 50px;
          margin-top: 50px;
          border-radius: 10px;
          cursor: pointer;
        "
        @click="toShuju()"
      >
        <div>
          <img
            :src="sysConfig.dta"
            style="
              width: 338px;
              height: 200px;
              border-radius: 10px 10px 0px 0px;
            "
          />
        </div>
        <div style="width: 340px; line-height: 35px; text-align: center">
          数据大屏
        </div>
      </div>
      <div
        style="
          border: #1ab394 1px solid;
          width: 340px;
          float: left;
          margin-left: 50px;
          margin-top: 50px;
          border-radius: 10px;
          cursor: pointer;
        "
        @click="toRelFace()"
      >
        <div>
          <img
            :src="sysConfig.dta"
            style="
              width: 338px;
              height: 200px;
              border-radius: 10px 10px 0px 0px;
            "
          />
        </div>
        <div style="width: 340px; line-height: 35px; text-align: center">
          基地实时数据展示
        </div>
      </div>
      <div
        style="
          border: #1ab394 1px solid;
          width: 340px;
          float: left;
          margin-left: 50px;
          margin-top: 50px;
          border-radius: 10px;
          cursor: pointer;
        "
        @click="toMonitorVideo()"
      >
        <div>
          <img
            :src="sysConfig.dtb"
            style="
              width: 338px;
              height: 200px;
              border-radius: 10px 10px 0px 0px;
            "
          />
        </div>
        <div style="width: 340px; line-height: 35px; text-align: center">
          监控系统
        </div>
      </div>
      <div
        style="
          border: #1ab394 1px solid;
          width: 340px;
          float: left;
          margin-left: 50px;
          margin-top: 50px;
          border-radius: 10px;
          cursor: pointer;
        "
        @click="toYzgl()"
      >
        <div>
          <img
            :src="sysConfig.dtc"
            style="
              width: 338px;
              height: 200px;
              border-radius: 10px 10px 0px 0px;
            "
          />
        </div>
        <div style="width: 340px; line-height: 35px; text-align: center">
          养殖管理
        </div>
      </div>
      <div
        style="
          border: #1ab394 1px solid;
          width: 340px;
          float: left;
          margin-left: 50px;
          margin-top: 50px;
          border-radius: 10px;
          cursor: pointer;
        "
        @click="toXtgl()"
      >
        <div>
          <img
            :src="sysConfig.dtd"
            style="
              width: 338px;
              height: 200px;
              border-radius: 10px 10px 0px 0px;
            "
          />
        </div>
        <div style="width: 340px; line-height: 35px; text-align: center">
          系统管理
        </div>
      </div>
      <div
        style="
          border: #1ab394 1px solid;
          width: 340px;
          float: left;
          margin-left: 50px;
          margin-top: 50px;
          border-radius: 10px;
          cursor: pointer;
        "
        @click="toYzcgl()"
      >
        <div>
          <img
            :src="sysConfig.dte"
            style="
              width: 338px;
              height: 200px;
              border-radius: 10px 10px 0px 0px;
            "
          />
        </div>
        <div style="width: 340px; line-height: 35px; text-align: center">
          养殖场管理
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSysConfig } from "@/api/basic/sysConfig";
export default {
  name: "index",
  components: {},
  data() {
    return {
      sysConfig: {},
    };
  },
  computed: {},
  created() {
    getSysConfig().then((response) => {
      this.sysConfig = response.data;
    });
  },
  methods: {
    toUrl() {},
    toRelFace() {
      window.open(window.location.origin + "/breedManage", "_blank");
    },
    toShuju() {
      window.open(window.location.origin + "/dataScreen", "_blank");
    },
    toMonitorVideo() {
      window.open(window.location.origin + "/monitorVideo", "_blank");
    },
    toYzgl() {
      this.$router.push("/basic/collectPoint");
    },
    toXtgl() {
      this.$router.push("/system/user");
    },
    toYzcgl() {
      this.$router.push("/yzcManage/ztxx/mainInfo");
    },
  },
};
</script>

<style scoped lang="scss">
.myCard ::v-deep .el-card__body {
  padding: 0;
}
</style>
